:root {
  --ratio: calc(768px / 100vw);
}

body {
  padding: 0;
  margin: 0;
  height: 600vh;
}

svg {
  --scrolled: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.bg {
  x: 0;
  y: 35vh;
  width: 100%;
}

g rect {
  x: 0;
  y: 0;
  width: 100%;
  height: 100vh;
}

g image {
  x: 45%;
  y: 5vh;
  transform: translateX(-10%);
  height: 90vh;
}

g text {
  transform: translate(60vw, 50vh);
  font-size: 56px;
  line-height: 1.07143;
  font-weight: 600;
  letter-spacing: -0.005em;
  font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica",
    "Arial", sans-serif;
}

path {
  fill: none;
  stroke: white;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 0.5;
  stroke-dasharray: 8 8;
}

#mask1 path {
  stroke-dashoffset: calc(8 - 8 * (min(var(--scrolled), 0.15) * 4));
} /* 0 */

#mask2 path {
  stroke-dashoffset: calc(
    max(0, 8 * (1 - (max(var(--scrolled), 0.15) - 0.15) * 4))
  );
} /* 0.15 */

#mask3 path {
  stroke-dashoffset: calc(
    max(0, 8 * (1 - (max(var(--scrolled), 0.35) - 0.35) * 4))
  );
} /* 0.35 */

#mask4 path {
  stroke-dasharray: 7 11;
  stroke-dashoffset: calc(
    max(0, 8 * (1 - (max(var(--scrolled), 0.55) - 0.55) * 4))
  );
} /* 0.55 */

#mask5 path {
  stroke-width: 1;
  stroke-dasharray: 30 29;
  stroke-dashoffset: calc(
    max(0, 30 * (1 - (max(var(--scrolled), 0.79) - 0.79) * 4))
  );
} /* 0.79 */
